<template>
  <view class="appointment-page">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="back-btn" @click="goBack">←</view>
      <text class="nav-title">预约挂号</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-bar">
        <view class="search-icon">🔍</view>
        <input class="search-input" placeholder="输入医院名称" />
      </view>
    </view>

    <!-- 医院列表 -->
    <view class="hospital-list">
      <view
        class="hospital-card"
        v-for="(hospital, index) in hospitals"
        :key="index"
        @click="selectHospital(hospital)"
      >
        <view class="hospital-logo">
          <view class="logo-circle">
            <view class="logo-text-top"
              >THE THIRD PEOPLE'S HOSPITAL OF SHENZHEN</view
            >
            <view class="medical-cross">
              <view class="cross-vertical"></view>
              <view class="cross-horizontal"></view>
            </view>
            <view class="logo-text-bottom">深圳市第三人民医院</view>
          </view>
        </view>
        <view class="hospital-info">
          <text class="hospital-name">{{ hospital.name }}</text>
          <view class="hospital-tags">
            <text class="tag-primary">{{ hospital.level }}</text>
            <text class="tag-secondary">{{ hospital.type }}</text>
          </view>
          <text class="hospital-address">地址: {{ hospital.address }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hospitals: [
        {
          name: "深圳第三人民医院",
          level: "三甲",
          type: "综合医院",
          address: "广东省深圳市龙岗区布澜路29号",
        },
        {
          name: "深圳第三人民医院",
          level: "三甲",
          type: "综合医院",
          address: "广东省深圳市龙岗区布澜路29号",
        },
        {
          name: "深圳第三人民医院",
          level: "三甲",
          type: "综合医院",
          address: "广东省深圳市龙岗区布澜路29号",
        },
        {
          name: "深圳第三人民医院",
          level: "三甲",
          type: "综合医院",
          address: "广东省深圳市龙岗区布澜路29号",
        },
      ],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectHospital(hospital) {
      uni.showToast({
        title: `选择${hospital.name}`,
        icon: "none",
      });
    },
  },
};
</script>

<style scoped>
.appointment-page {
  background: #fff;
  min-height: 100vh;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2rpx 10px rgba(0, 0, 0, 0.05);
}

.back-btn {
  font-size: 40px;
  color: #32cd32;
  margin-right: 20rpx;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #32cd32;
}

/* 搜索框 */
.search-container {
  padding: 30px;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #e8f5e8;
  border-radius: 25rpx;
  padding: 20rpx 5rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.search-icon {
  font-size: 36px;
  color: #32cd32;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

/* 医院列表 */
.hospital-list {
  padding: 0 30rpx;
}

.hospital-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

.hospital-logo {
  margin-right: 30rpx;
  min-width: 120rpx;
}

.logo-circle {
  width: 100rpx;
  height: 100rpx;
  background: #e3f2fd;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.logo-text-top {
  position: absolute;
  top: 8rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12rpx;
  color: #4169e1;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  width: 90rpx;
}

.logo-text-bottom {
  position: absolute;
  bottom: 8rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14rpx;
  color: #4169e1;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  width: 90rpx;
}

.medical-cross {
  position: relative;
  width: 40rpx;
  height: 40rpx;
  z-index: 1;
}

.cross-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4rpx;
  height: 40rpx;
  background: #32cd32;
  border-radius: 2rpx;
}

.cross-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #32cd32;
  border-radius: 2rpx;
}

.hospital-info {
  flex: 1;
}

.hospital-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 10rpx;
}

.hospital-tags {
  display: flex;
  gap: 16rpx;
  margin-bottom: 8rpx;
}

.tag-primary {
  background: #32cd32;
  color: #fff;
  border-radius: 12rpx;
  padding: 4rpx 16rpx;
  font-size: 22rpx;
}

.tag-secondary {
  background: #e8f5e8;
  color: #32cd32;
  border-radius: 12rpx;
  padding: 4rpx 16rpx;
  font-size: 22rpx;
}

.hospital-address {
  font-size: 24rpx;
  color: #888;
}
</style>
